<template>
    <div class="headSearch">
        <el-button round @click="handleShowDialog">
            <template #default>
                <span>
                    <el-icon :size="20"><Search /></el-icon>
                </span>
                <span class="text">Search</span>
                <span class="DocSearch-Button-Keys">
                    <kbd class="DocSearch-Button-Key">
                        <svg
                            width="15"
                            height="15"
                            class="DocSearch-Control-Key-Icon"
                            v-if="props.isShow === true"
                        >
                            <path
                                d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
                                stroke-width="1.2"
                                stroke="#909399"
                                fill="none"
                                stroke-linecap="square"
                            ></path>
                        </svg>
                        <span v-if="props.isShow === false">Alt</span>
                    </kbd>
                </span>
                <span class="DocSearch-Button-Keys">
                    <kbd class="DocSearch-Button-Key">K</kbd>
                </span>
            </template>
        </el-button>
        <DialogView></DialogView>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { data } from '@/components/search/components/headerSearch'
import DialogView from '@/components/search/components/dialog.vue'
const props = defineProps<{
    isShow: boolean
}>()
const handleShowDialog = () => {
    data.isShowDialog = true
}
</script>

<style scoped lang="scss">
.DocSearch-Button-Key {
    margin-left: 0.4rem;
}
</style>
